---
layout: false
---
<!doctype html>
<html class="no-js" lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>metisMenu on Foundation</title>
  <!-- Compressed CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css" />
  <link rel="stylesheet" href="metisMenu.min.css">

  {{#if github}}
  {{> ga}}
  {{/if}}

</head>

<body>
  <div class="top-bar">
    <div class="top-bar-left">
      <ul class="vertical medium-horizontal menu">
        <li class="menu-text">metisMenu</li>
        <li><a href="mm-vertical.html">Vertical Menu</a></li>
        <li><a href="mm-horizontal.html">Horizontal Menu</a></li>
        <li><a href="mm-folder.html">Folder View</a></li>
        <li><a href="mm-vertical-hover.html">Hover Option For Desktop</a></li>
        <li class="active"><a href="mm-zurb.html">Foundation | Zurb</a></li>
        <li><a href="mm-animate.html">Animate</a></li>
        <li><a href="mm-event.html">Event</a></li>
        <li><a href="mm-event2.html">Event 2</a></li>
      </ul>
    </div>
  </div>

  <div class="row">
    <div class="large-3 columns">
      <nav>
        <ul id="menu" class="side-nav metismenu menu vertical">
          <li><a href="#">Link 1</a></li>
          <li>
            <a href="#">Menu 1<span class="badge alert float-right">3<span></a>
            <ul class="nested vertical menu">
              <li><a href="#">Link 1.1</a></li>
              <li><a href="#">Link 1.2</a></li>
              <li><a href="#">Link 1.3</a></li>
            </ul>
          </li>
          <li>
            <a href="#">Menu 2<span class="badge warning float-right">1<span></a>
            <ul class="nested vertical menu">
              <li>
                <a href="#">Menu 2.1<span class="badge danger float-right">3<span></a>
                <ul class="nested vertical menu">
                  <li><a href="#">Link 2.1.1</a></li>
                  <li><a href="#">Link 2.1.2</a></li>
                  <li><a href="#">Link 2.1.3</a></li>
                </ul>
              </li>
              <li><a href="#">Link 2.2</a></li>
              <li>
                <a href="#">Menu 2.2 <span class="badge success float-right">3<span></a>
                <ul class="nested vertical menu">
                  <li><a href="#">Link 2.2.1</a></li>
                  <li><a href="#">Link 2.2.2</a></li>
                  <li><a href="#">Link 2.2.3</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li><a href="#">Link 4</a></li>
        </ul>
      </nav>
    </div>
    <div class="large-9 columns">
      <div class="panel">
        <h5>Panel Title</h5>
        <p>This is a six columns grid panel with an arbitrary height. Bacon ipsum dolor sit amet salami ham hock biltong ball tip drumstick sirloin pancetta meatball short loin.</p>
      </div>
    </div>
  </div>




  {{#if github}}
    {{> ads}}
  {{/if}}


  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <!-- Compressed JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/js/foundation.min.js"></script>
  <script src="metisMenu.js"></script>
  <script>
    $(document).foundation();
    $('#menu').metisMenu();
  </script>
</body>

</html>
